/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text,
    TextArea,
    Input,
    Button,
    useTheme,
    Table,
    TableBody,
    TableRow,
    CCell,
    LineColumn,
    InputLine,
    SuffixInput,
    ButtonRefComp,
    BlobInputList,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, SelectPair, useItemInputControl, 现场条件选,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import {tableSetInp} from "../../common/tool";
import {EachMeasureCritConfig} from "../common/msCriteria";
import {useMeasureItem, useMeasureRow} from "../hook/useMeasure";
import {useJudgmentEdit} from "../hook/useJudgment";

//可以复用的组件： 尽量抽象 和 提高代码复用程度！
interface Props  extends InternalItemProps{
    nos?: string;
    titles?: any[];    //可能是Node[]，不一定纯粹string;  可变的多个标题编码的。
    zjuse?: number;     //最末尾的注释的文本使用那一段话？可选择办法的。
    config?: any[];    //有配置模式的 : 表对象的默认取值；

}
interface OtherIspItemSetProps  extends Props, InternalItemProps{
    //第一条的序号
    baseSeq: number;
}

const itemA动态项=['_Oitems'];
const default用户项目: never[]=[ ];
/**【特殊】用户添加的检验项目; 支持 非自拆分的 简单项目。 只能支持二级的标题配置。
 * */
export const OtherIspItemSet=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,baseSeq}:OtherIspItemSetProps,  ref
    ) => {
        const defvcbFunc = React.useCallback((par: any) => {
            const { _Oitems }=par||{};
            if(!(_Oitems?.length>=1))   par._Oitems=default用户项目;
            return  par;
        }, []);
        const [getInpFilter]=useMeasureInpFilter(null,itemA动态项,defvcbFunc);
        const {inp, setInp} = useItemInputControl({ ref });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd}
                                    alone={alone} label={label!}>
            <Text variant="h5">
              {label}；这是动态项，要首先配置，不要反复改，项目顺序保持，才能确保一致。
            </Text>
            <hr/>
            <DynamicItems nums={5} baseSeq={baseSeq} inp={inp} setInp={setInp} defaultV={default用户项目} label={'可自己增加的检验项目'}/>
            <hr/>
            {children}
        </InspectRecordLayout>;
    });

/**记录描述的只能文本，缺点：不能拆入换行<br/>。
 * */
const DynamicItems= ( { inp,  setInp, defaultV,label,nums=4,baseSeq} :
                          { inp: any,setInp: React.Dispatch<React.SetStateAction<any>>,defaultV?:any,label:any,nums?:number,baseSeq:number}
) => {
    return (
        <div>
            <Text variant="h5">
                {label}: <Button onPress={() => {setInp({ ...inp, _Oitems: defaultV});} }>清空全表至默认</Button>
            </Text>
            { (new Array(nums)).fill(null).map(( _,  w:number) => {
                return <React.Fragment key={w}>
                    序号 {w+baseSeq} ：
                    <div css={{display: 'inline-flex', alignItems: 'center',whiteSpace: 'nowrap'}}>
                        项目编号
                        <Input value={inp?._Oitems?.[w]?.s ||''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                               onChange={e =>tableSetInp('_Oitems',w, inp,setInp,'s',e.currentTarget.value||undefined)}/>
                    </div>
                    <div css={{display: 'inline-flex', alignItems: 'center',whiteSpace: 'wrap'}}>
                        检验项目(报告标题)
                        <TextArea  value={inp?._Oitems?.[w]?.c ||''} rows={2}
                                   onChange={e =>tableSetInp('_Oitems',w, inp,setInp,'c',e.currentTarget.value||undefined)}/>
                    </div>
                    <div>
                        检验内容与要求(记录描述)
                        <TextArea  value={inp?._Oitems?.[w]?.e ||''} rows={2}
                                   onChange={e =>tableSetInp('_Oitems',w, inp,setInp,'e',e.currentTarget.value||undefined)}/>
                    </div>
                </React.Fragment>;
            }) }
        </div>
    );
};


const itemA现场 = ['检验条件'];
/**类似通用的二维表格，但有不同点：必须有一个关键字段唯一性判定；互动流程稍微有差别。适合小数量数据集合。 aDateObj直接倒手...inp;同一个对象参考inp?.检验条件?.find()。
 * */
export const SiteConditionAmus =
React.forwardRef((
    {children, show, alone = true, refWidth, label}: Props, ref
) => {
    const theme = useTheme();
    const [getInpFilter] = useMeasureInpFilter(null, itemA现场,);
    const {inp, setInp} = useItemInputControl({ref});
    const [floor, setFloor] = React.useState<string | null>(null);
    const aDateObj = inp?.检验条件?.find((t: any) => t.d === floor);
    const dateBlurRef = React.useRef(null);
    return (
        <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                             alone={alone} label={label!}>
            <Text variant="h5">{label}</Text>
            1、温度、湿度、照明及室外气候条件能满足游乐设施正常运行及检验作业要求；<br/>
            2、输入电气系统的电压正常，电压波动在允许值以内；<br/>
            3、检验现场不应有与游乐设施工作无关的物品和设备，并应放置表明现场正在进行检验的警示牌。
            <hr/>
            <div>现场检验条件确认结果的记录:
                <Table css={{borderCollapse: 'collapse'}} tight miniw={800}>
                    <TableBody>
                        <TableRow>
                            <CCell>确认日期</CCell>
                            <CCell>1、温度、湿度、照明及室外气候条件能满足游乐设施正常运行及检验作业要求</CCell>
                            <CCell>2、输入电气系统的电压正常，电压波动在允许值以内</CCell>
                            <CCell>3、检验现场不应有与游乐设施工作无关的物品和设备，并应放置表明现场正在进行检验的警示牌</CCell>
                        </TableRow>
                        {inp?.检验条件?.map((obj: any, i: number) => {
                            return <TableRow key={i}>
                                <CCell>{obj?.d}</CCell>
                                <CCell>{obj?.T || ''}</CCell>
                                <CCell>{obj?.y || ''}</CCell>
                                <CCell>{obj?.x || ''}</CCell>
                            </TableRow>
                        })}
                    </TableBody>
                </Table>
            </div>
            <>新增检查确认时间=＞</>
            <LineColumn>
                <InputLine label='首先设置当前检验日期'>
                    <SuffixInput type='date' onPointerOut={(e: any) => {
                        // @ts-ignore
                        dateBlurRef!.current!.focus();
                    }}
                                 value={floor || ''} onSave={txt => setFloor(txt || null)}>
                        <ButtonRefComp disabled={aDateObj || !floor} ref={dateBlurRef}
                                       onPress={() => setInp({
                                           ...inp,
                                           检验条件: (inp?.检验条件 ? [...inp?.检验条件, {d: floor}] : [{d: floor}])
                                       })}
                        >新增</ButtonRefComp>
                        <Button disabled={!aDateObj || !floor}
                                css={{marginTop: theme.spaces.sm}} size="sm"
                                onPress={() => setInp({
                                    ...inp,
                                    检验条件: [...inp?.检验条件?.filter((t: any) => t.d !== floor)],
                                })}
                        >刪除</Button>
                    </SuffixInput>
                </InputLine>
                <InputLine label={`1、温度、湿度、照明及室外气候条件(${floor})`}>
                    <SelectPair value={aDateObj?.T || ''} dlist={现场条件选} onChange={e => {
                        if (floor && aDateObj) {
                            aDateObj.T = e.currentTarget.value || undefined;
                            setInp({...inp});
                        }
                    }}/>
                </InputLine>
                <InputLine label={`2、输入电气系统的电压正常，电压(${floor})`}>
                    <SelectPair value={aDateObj?.y || ''} dlist={现场条件选} onChange={e => {
                        if (floor && aDateObj) {
                            aDateObj.y = e.currentTarget.value || undefined;
                            setInp({...inp});
                        }
                    }}/>
                </InputLine>
                <InputLine label={`3、检验现场不应有无关的物品(${floor})`}>
                    <SelectPair value={aDateObj?.x || ''} dlist={现场条件选} onChange={e => {
                        if (floor && aDateObj) {
                            aDateObj.x = e.currentTarget.value || undefined;
                            setInp({...inp});
                        }
                    }}/>
                </InputLine>
            </LineColumn>
            注：每次到现场后，在检验前应对检验条件进行确认，只有确认所有与检验相关的条件满足检验要求时，才能开始开展检验工作。
        </InspectRecordLayout>
    );
});


interface MeasureJudgmentMemProps extends InternalItemProps {
    label: string;
    config: ((orc: any) => EachMeasureCritConfig[][]) | EachMeasureCritConfig[][];
    iAname?: string[];    //附加的存储那些字段， 但是下面的mem除外。
    mem?: string;       //备注的存储名
    //判定标准栏目，允许取值；
    allowableV?: boolean;
    defaultSave?: boolean;
}
/**测量编辑器；有判定栏目
 * 可备注录入。
 * */
export const MeasureJudgmentMem =
    React.forwardRef((
        {
            children, show, alone = true, refWidth, label,
            config, iAname, allowableV = false, defaultSave = false, mem
        }: MeasureJudgmentMemProps, ref
    ) => {
        const {inp, setInp} = useItemInputControl({ref});
        //【Hook死循环】不能使用const newconfig=typeof config ==='function'? config(inp) : config;
        const newconfig = React.useMemo(() => {
            return (typeof config === 'function' ? config(inp) : config);
        }, [inp, config]);

        const {render, itemObservation, itemObservationA,} = useJudgmentEdit(inp, setInp,
            newconfig, allowableV, defaultSave);
        // const {itemObservation, itemObservationA,} = useMeasureItem(newconfig, allowableV);
        //有可能这两个注入的 newconfig 不一样？
        // const {render} = useMeasureRow(inp, setInp, newconfig, allowableV, defaultSave);
        const itemA备注: string[] = mem ? [`${mem}`] : [];
        const itemA = React.useMemo(() => {
            return [...itemObservationA, ...itemA备注, ...iAname ?? []];
        }, [itemObservationA, iAname]);

        const [getInpFilter] = useMeasureInpFilter(itemObservation, itemA,);
        //死循环！
        // React.useEffect(() => { setInp({ ...inp, 输线电压: voltage }); }, [voltage, inp, setInp] );

        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label}>
                <Text variant="h5">{label}：</Text>
                {render}
                {mem && <>
                    <hr/>
                    备注：
                    <TextArea value={inp?.[mem] || ''} rows={5}
                              onChange={e => setInp({...inp, [mem]: e.currentTarget.value || undefined})}/>
                </>
                }
                {children}
            </InspectRecordLayout>
        );
    });

interface MemoEditorProps  extends InternalItemProps{
    preDesc?: any;
    datalist?:any[];
}
const itemA备注=['大备注'];
/**通用 六、备注, 没有见证材料部分
 * */
export const MemoEditor=
React.forwardRef((
    { children, show ,alone=true,redId,nestMd,label,preDesc,datalist}:MemoEditorProps,  ref
) => {
    const [getInpFilter]=useMeasureInpFilter(null,itemA备注, );
    const {inp, setInp} = useItemInputControl({ ref });
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}</Text>
        {preDesc}
        <BlobInputList value={inp?.大备注 ?? ''} rows={7}  datalist={datalist}
                       onListChange={v => setInp({...inp, 大备注: v || undefined}) } />
        { children }
    </InspectRecordLayout>;
});
